之前已經讓地圖順利呈現出來，現在要把地圖的位置改成台北101
所以要先取得台北101的經緯座標，利用google map 去搜尋台北101

在網址列裡面會看到地址後方有兩組數字，紅色框選處，代表的是經緯度。後方的16.74就是縮放尺寸。

現在把它套在從Google Map API 複製的原始碼。

    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 25.0335398, lng: 121.5620666},
          zoom: 16
        });
      }
    </script>

要修改的地方如下：

//修改前
center: {lat: -34.397, lng: 150.644},
zoom: 8
//修改後 
center: {lat: 25.0335398, lng: 121.5620666},
zoom: 16

重新整理網頁如下圖：

地圖不要全螢幕顯示的話可修改 map 的 css

#map {
  width:500px;
  height: 500px;
 }

增加標記：

假設想標註101的附近的位置，要再透過網頁搜尋101並在旁邊點擊位置(上方紅框)，下方會出現座標經緯度(下方紅框)。

現在的做法是，告訴Google Map 要以101座標為中心，另外標一個點也就是上圖位置 ，所以新增下方程式碼：

    var marker = new google.maps.Marker({
      position : { lat: 25.033977, lng: 121.563998 },//positon 位置
      map:map, //標示地圖
      title:'小明的位置'//說明文字(選擇性填寫)
    })

上方程式碼的大略意思為：

定義 marker 為google map 新的標註點，Marker在新增位置時來呼叫他的API 並執行function
詳情可看：https://developers.google.com/maps/documentation/javascript/markers?hl=zh-tw

滑鼠滑過會看到title資訊

JS程式碼：

  <script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 25.0335398, lng: 121.5620666 },
        zoom: 16
      });
    var marker = new google.maps.Marker({
      position : { lat: 25.033977, lng: 121.563998 },
      map:map,
      title:'小明的位置'
    })
    }
  </script>